<script lang="ts" setup>
import type { MenuItem } from '~/composables/useApiMenuData';

interface Props {
  menuItem: MenuItem
  type?: 'radio'
  active?: boolean
}
defineOptions({
  name: 'AppMenuItem',
})
const props = withDefaults(defineProps<Props>(), {})

const { isLogin } = storeToRefs(useAppStore())
const { sideBigActiveMenu } = storeToRefs(useMenuStore())
const { isSportsLoginSusses } = storeToRefs(useSportsStore())
const route = useRoute()

// const active = computed(() => {
//   const { path, promo_id } = props.menuItem
//   if (route.path.includes('/sports/')) {
//     return sideBigActiveMenu.value
//       && props.menuItem.path && props.menuItem.path.length
//       && replaceSportsPlatId(sideBigActiveMenu.value.toString())
//       === replaceSportsPlatId(props.menuItem.path)
//   }
//   else if (props.menuItem.fullPath) {
//     return route.fullPath.includes(props.menuItem.fullPath)
//   }
//   else if (route.path.includes('promotions/promotion/customize')) {
//     const _path = `/${getCurrentUrlLanguage()}${path}${promo_id ? `?pid=${promo_id}` : ''}`
//     return _path === route.fullPath || _path === route.path
//   }

//   const _path = `/${getCurrentUrlLanguage()}${path}`
//   return _path === route.fullPath || _path === route.path
// })
</script>

<template>
  <button class="active:bg-bg-black-4 transition-colors duration-150 flex gap-[0.75rem] p-[0.5rem] items-center w-full h-[2.5rem]" :disabled="(menuItem.token && !isLogin) || (menuItem.sptToken && !isSportsLoginSusses)" :class="[menuItem.separate && 'border-t border-t-bg-black-5']">
    <div class="size-[1rem] flex center">
      <AppImage
          v-if="menuItem.useCloudImg" :url="menuItem.icon" is-cloud with-theme
          class="icon-img size-[1rem]"
      />
      <BaseIcon v-else :name="menuItem.icon" size="1rem"/>
    </div>
    <span class="text-[0.875rem] text-text-white-0 font-[600] line-clamp-1 text-left">{{ menuItem.title }}</span>
    <div class="flex-1"></div>
    <div v-if="menuItem.fixtureCount" class="badge-wrap">
      <BaseBadge :count="menuItem.fixtureCount" mode="active" :max="99999" />
    </div>
    <span class="text-text-white-2 text-[0.75rem] mr-[0.625rem] font-[500]" v-if="menuItem.tailTitle">{{ menuItem.tailTitle }}</span>
    <div class="shrink-0 size-[20px] bg-bg-black-5 rounded-[4px] flex justify-center items-center" v-if="menuItem.children?.length">
        <BaseIcon name="uni-arrow-right" className="!text-text-white-0 transition-all" :class="{ 'rotate-90': active }"/>
    </div>
  </button>
</template>

<style scoped lang="scss">
  .disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>